import React, { Component } from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css'
export default class App extends Component {
  state = {
    todoList: [
      { id: "001", name: "李易峰", flag: true },
      { id: "002", name: "蔡徐坤", flag: false },
      { id: "003", name: "易烊千玺", flag: false }
    ]
  }
  //搜素事件
  addTodo = (todo) => {
    const { todoList } = this.state;
    const newTodos = [todo, ...todoList];
    this.setState({ todoList: newTodos });
  }
  //item划过事件
  undataTodo = (id, flag) => {
    const { todoList } = this.state;
    const newTodo = todoList.map(item => {
      if (item.id === id) return { ...item, flag };
      else return item;
    })
    this.setState({ todoList: newTodo })
  }
  //单个删除
  delTodo = (id) => {
    const { todoList } = this.state;
    const newsTodo = todoList.filter(item => {
      return item.id !== id;
    })
    this.setState({ todoList: newsTodo })
  }
  //单选事件
  changeTodo = (flag) => {
    const { todoList } = this.state;
    const todoListFlag = todoList.map(item => {
      return { ...item, flag }
    })
    this.setState({ todoList: todoListFlag })
  }
  //全选删除
  delAddTodo = () => {
    const { todoList } = this.state;
    const todoDel = todoList.filter(item => {
      return !item.flag;
    })
    this.setState({ todoList: todoDel })
  }

  render() {
    const { todoList } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todoList={todoList} undataTodo={this.undataTodo} delTodo={this.delTodo} />
          <Footer todos={todoList} changeTodo={this.changeTodo} delAddTodo={this.delAddTodo} />
        </div>
      </div>
    )
  }
} 